<template>
  <div class="swiper-container" :style="containerStyle">
      <!-- <img :src="imgUrlInfo" alt="Main Slide" /> -->

    <!-- 主轮播图 -->
    <swiper class="main-swiper" :space-between="10" :modules="modules" :thumbs="{ swiper: thumbsSwiper }" >
      <swiper-slide v-for="(item, index) in props.list" :key="index">
        <div class="image-container">
          <img :src="item?.url" alt="Main Slide" />
        </div>
      </swiper-slide>
    </swiper>

    <!-- 缩略图轮播图 -->
    <swiper class="thumbs-swiper" :space-between="10" :slides-per-view="3" :free-mode="true" :watch-slides-progress="true" :modules="modules" @swiper="setThumbsSwiper" :navigation="true">
      <swiper-slide v-for="(item, index) in props.list" :key="index">
        <div  class="image-container1">
          <img :src="item?.url" alt="Thumb Slide" />
        </div>
      </swiper-slide>
    </swiper>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
import imgUrlInfo from '@/assets/images/box-info.png'

import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';

const modules = [Thumbs, FreeMode, Navigation];
const props = defineProps({
  list: {
    mainFileList: Array,
    default: () => []
  },
  config: {
    type: Object,
    default: () => ({})
  }
});

const containerStyle = ref({
  width: props.config.width || '100%',
  // height: props.config.height || '100%'
})
// const navigation ={
//   nextEl: '.swiper-button-next', // 右箭头选择器
//   prevEl: '.swiper-button-prev'
// };
 

const thumbsSwiper = ref(null);

const setThumbsSwiper = (swiper: any) => {
  thumbsSwiper.value = swiper;
};

</script>
<style scoped>
.swiper-container {
  position: relative;
}

.main-swiper {
  width: 100%;
  height: 80%;
}

.thumbs-swiper {
  width: 100%;
  /* height: 20%; */
  box-sizing: border-box;
  padding: 10px 0;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.thumbs-swiper .swiper-button-prev, 
.thumbs-swiper .swiper-button-next {
  color: #ccc; /* 设置按钮颜色 */
  background-color: rgba(0, 0, 0, 0.5); /* 设置按钮背景颜色 */
  padding: 10px; /* 设置按钮内边距 */
  width: 20px;
  height: 20px;
}
.image-container {
  width: 100%;
  aspect-ratio: 16/9; /* 关键：设置宽高比（如 16:9、1:1） */
  overflow: hidden; /* 可选：裁剪超出部分 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：填充容器，保持比例 */
}

.image-container1 {
  width: 100%;
  aspect-ratio: 2/1; /* 关键：设置宽高比（如 16:9、1:1） */
  overflow: hidden; /* 可选：裁剪超出部分 */
}

.image-container1 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：填充容器，保持比例 */
}
</style>